import React from 'react';
import { Card, Form, Space, Typography, Button } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { CardProps } from 'antd/es/card';
import { FormInstance } from 'antd/es/form';
import styles from './styles.module.css';

const { Title } = Typography;

export interface FilterCardProps extends Omit<CardProps, 'children'> {
  // 页面标题
  pageTitle?: React.ReactNode;
  // 标题图标
  titleIcon?: React.ReactNode;
  // 表单实例
  form?: FormInstance;
  // 表单提交处理
  onFinish?: (values: any) => void;
  // 表单重置处理
  onReset?: () => void;
  // 表单布局方式
  layout?: 'horizontal' | 'vertical' | 'inline';
  // 是否显示搜索按钮（当设置了onFinish时默认为true）
  showSearchButton?: boolean;
  // 是否显示重置按钮（当设置了form时默认为true）
  showResetButton?: boolean;
  // 搜索按钮文本
  searchButtonText?: string;
  // 重置按钮文本
  resetButtonText?: string;
  // 子元素（表单项）
  children: React.ReactNode;
  // 额外的操作按钮区域
  extra?: React.ReactNode;
}

/**
 * 统一的筛选卡片组件
 * 用于页面顶部的筛选功能区域
 * 包含标题、筛选表单和操作按钮
 */
const FilterCard: React.FC<FilterCardProps> = ({
  pageTitle,
  titleIcon,
  form,
  onFinish,
  onReset,
  layout = 'inline',
  showSearchButton,
  showResetButton,
  searchButtonText = '搜索',
  resetButtonText = '重置',
  children,
  extra,
  className,
  ...cardProps
}) => {
  // 决定是否显示搜索和重置按钮
  const shouldShowSearchButton = showSearchButton !== false && !!onFinish;
  const shouldShowResetButton = showResetButton !== false && !!form;
  const showActionButtons = shouldShowSearchButton || shouldShowResetButton;

  // 处理重置逻辑
  const handleReset = () => {
    if (form) {
      form.resetFields();
    }
    if (onReset) {
      onReset();
    }
  };

  // 渲染操作按钮
  const renderActionButtons = () => {
    if (!showActionButtons) return null;

    return (
      <Form.Item style={{ marginBottom: 0 }}>
        <Space>
          {shouldShowSearchButton && (
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              {searchButtonText}
            </Button>
          )}
          {shouldShowResetButton && (
            <Button onClick={handleReset} icon={<ReloadOutlined />}>
              {resetButtonText}
            </Button>
          )}
        </Space>
      </Form.Item>
    );
  };

  return (
    <Card
      {...cardProps}
      className={`${styles.filterCard} ${className || ''}`}
      bodyStyle={{ padding: '12px 24px', ...cardProps.bodyStyle }}
    >
      <div className={styles.filterContent}>
        {/* 页面标题区域 */}
        {pageTitle && (
          <div className={styles.titleSection}>
            {typeof pageTitle === 'string' ? (
              <Title level={4} className={styles.pageTitle}>
                {titleIcon && <span className={styles.titleIcon}>{titleIcon}</span>}
                {pageTitle}
              </Title>
            ) : (
              pageTitle
            )}
          </div>
        )}
        
        {/* 筛选表单区域 */}
        <div className={styles.formSection}>
          {form ? (
            <Form
              form={form}
              layout={layout}
              onFinish={onFinish}
              className={styles.filterForm}
            >
              {children}
              {renderActionButtons()}
            </Form>
          ) : (
            <div className={styles.filterForm}>
              {children}
            </div>
          )}
        </div>
        
        {/* 额外操作区域 */}
        {extra && (
          <div className={styles.extraSection}>
            {extra}
          </div>
        )}
      </div>
    </Card>
  );
};

export default FilterCard; 